import * as BABYLON from "babylonjs";

export class Animation3D {
    private _canvas: HTMLCanvasElement;
    private _engine: BABYLON.Engine;
    private _scene: BABYLON.Scene;
    private _camera: BABYLON.ArcRotateCamera;
    private _light: BABYLON.Light;
    constructor(canvasId: string) {
        this._canvas = document.getElementById(canvasId) as HTMLCanvasElement;
        this._engine = new BABYLON.Engine(this._canvas, true);
        this._scene = {} as BABYLON.Scene;
        this._camera = {} as BABYLON.ArcRotateCamera;
        this._light = {} as BABYLON.Light;
    }

    createScene(): void {
        this._scene = new BABYLON.Scene(this._engine);
        this._scene.ambientColor = new BABYLON.Color3(1, 1, 1); // 设置背景颜色
        this._camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 50, BABYLON.Vector3.Zero(), this._scene);
        this._camera.attachControl(this._canvas, true);
        this._light = new BABYLON.HemisphericLight('mylight', new BABYLON.Vector3(0, 1, 0), this._scene);
    }

    createShape() {
        // 1. 直线运动
        // var box = BABYLON.Mesh.CreateBox("Box1", 5, this._scene);
        // let frameRate = 60; // 帧率
        // var animationbox = new BABYLON.Animation('animationSphere', 'position.z', frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        // // 关键帧
        // var keyFrames: any[] = [];
        // keyFrames.push({
        //     frame: 0,
        //     value: -5
        // });
        // keyFrames.push({
        //     frame: 50,
        //     value: 5,
        //     inTangent: 1,
        //     outTangent: 4
        // });
        // keyFrames.push({
        //     frame: 100,
        //     value: -5
        // });
        // animationbox.setKeys(keyFrames);
        // box.animations.push(animationbox);
        // setTimeout(async () => {
        //     console.log('begin ... ');
        //     // 可操作animatable对象
        //     var animatable = this._scene.beginAnimation(box, 0, 100, false); //最后一个参数必须为false才可出发end function
        //     await animatable.waitAsync();
        //     console.log('end ... ');
        // }, 0);

        // 2. easing效果
        let box = BABYLON.Mesh.CreateBox("Box1", 5, this._scene);
        box.position.z = -30;
        let animationbox = new BABYLON.Animation('animation', 'position', 60, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        let nextPos = box.position.add(new BABYLON.Vector3(0, 0, 50));
        let keyFrames: any[] = [];
        keyFrames.push({ frame: 0, value: box.position });
        keyFrames.push({ frame: 120, value: nextPos });
        animationbox.setKeys(keyFrames);
        let easing = new BABYLON.CircleEase();
        easing.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); // 可以设置 EASEIN (default), EASEOUT, EASEINOUT
        animationbox.setEasingFunction(easing);
        box.animations.push(animationbox);
        this._scene.beginAnimation(box, 0, 120, false);


    }

    async animationExecution(animatable) {
        console.log('begin ... ');
        await animatable.waitAsync();
        console.log('after ...')
    }

    doRender(): void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
            this._scene.render();
        });

        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
            this._engine.resize();
        });
    }
}